<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
    #video{
        width: 800px;
        height: 500px;
        border:1px solid #eaeaaa;
        object-fit: fill;
        margin: 0 auto;
        position: fixed;
        left: 50%;
        top: 10px;
        margin-left: -250px;
    }
    .inpbox{
        margin-top: 15px;
    }
</style>
</head>
<body>
设置发送userid: <input type="text" id="useid" value="1">
<div class="inpbox">
设置已读userid: <input type="text" id="userMsg" oninput="setRemove(value)">  
</div>
<div class="inpbox">
    <button onclick="getMsg()">测试</button>
    <button onclick="reMsg()">发送</button>
    <button onclick="clearMsg()" id="read">全部已读</button>   
</div>
<!-- <script type="text/javascript" src="js/cyberplayer.js"></script>
<script type="text/javascript">
    var player = cyberplayer("playercontainer").setup({
        width: 680,
        height: 448,
        file: "rtmp://cyberplayerplay.kaywang.cn/cyberplayer/demo201711-L1",
        autostart: true,
        stretching: "uniform",
        volume: 100,
        controls: true,
        rtmp: {
            reconnecttime: 5, // rtmp直播的重连次数
            bufferlength: 1 // 缓冲多少秒之后开始播放 默认1秒
        },
        ak: "gC4c68fZAyFKhKgjjFWIhyeNDC0V9x2n"
    });
</script>   --> 
<!-- <video  id="video" autoplay="autoplay" ></video> -->
<script type="text/javascript">
    function reMsg(){
        var fromMemberId=document.getElementById('useid').value
            fromMemberId=parseInt(fromMemberId)
        var msgBox = localStorage.getItem('msgBox')
        if (msgBox !== null && msgBox !== undefined) {                     
          msgBox = JSON.parse(msgBox)
          let message = msgBox.message
          let userId=msgBox.userId;
          let noMsg=userId.indexOf(fromMemberId)===-1//没未读消息
          if(!noMsg){
            message.forEach(function (item, index) {
                if (item.id === fromMemberId) {
                    let number=item.missMsg
                    number++
                  msgBox.message[index].missMsg = number
                }
            })
          }else{
            msgBox.userId.push(fromMemberId)
            msgBox.message.push({
                id: fromMemberId,
                missMsg: 1
            })            
          }
          msgBox = JSON.stringify(msgBox)
          localStorage.setItem('msgBox', msgBox)
        } else {
          msgBox = {
            message: [],
            userId:[]
          }
          msgBox.userId.push(fromMemberId)
          msgBox.message.push({
            id: fromMemberId,
            missMsg: 1
          })
          msgBox = JSON.stringify(msgBox)
          localStorage.setItem('msgBox', msgBox)
        }    
        getMsg();    
    }
    function getMsg(){
        var msgBox = localStorage.getItem('msgBox')
        if(msgBox !== null && msgBox !== undefined){
            msgBox = JSON.parse(msgBox)
            console.log(msgBox)
        }else{
           msgBox="没有未收到消息" 
           console.log('%c 没有未读信息','color:red')
        } 
    }
    function clearMsg(){
        var removeId=document.getElementById('userMsg').value
        var msgBox = localStorage.getItem('msgBox')
        if (msgBox !== null && msgBox !== undefined) { 
            msgBox = JSON.parse(msgBox)
            let message = msgBox.message
            let userId=msgBox.userId;
            if(removeId!==""){
                removeId=parseInt(removeId)
                let outUser=userId.indexOf(removeId)<0//
                if(!outUser){
                    message.forEach(function (item, index) {
                        if (item.id === removeId) {
                          msgBox.message.splice(index,1)
                          msgBox.userId.splice(index,1)
                        }
                    })
                  msgBox = JSON.stringify(msgBox)
                  localStorage.setItem('msgBox', msgBox)                    
                }else{
                    console.log('%c 没有未读信息','color:red')
                }
            }else{
                localStorage.removeItem('msgBox');        
            }
        }else{
            console.log('%c 没有未读信息','color:red')
        }

    }
    function setRemove(val){
        var read=document.getElementById('read')
        if(val!==''){
            read.innerText="读取用户id为"+val+"的消息"
        }else{
            read.innerText="全部已读"
        }
    }
</script>
</body>
</html>
